<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>修改用户</span>
      </div>
      <el-descriptions class="margin-top" title="用户信息" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{ account }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            账号ID
          </template>
          {{ id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            注册时间
          </template>
          {{ ctime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            用户组
          </template>
          <el-tag size="small">{{ userGroup }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            修改头像
          </template>

          <el-upload
            :action="UPLOAD_HEAD_IMG"
            :on-success="handleAvatarSuccess"
            :data="uploadData"
            :show-file-list="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            修改密码
          </template>

          <div>
            <el-input v-model="newPwd" style="width: 80%"></el-input>
            <el-button @click="ClickeditPwd">确定</el-button>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { UPLOAD_HEAD_IMG, userImg, editpwd } from "../../../../api/apis";
import { getTime } from "../../../utils/utils";

export default {
  data() {
    return {
      uploadData: {},
      UPLOAD_HEAD_IMG: "", //用户头像上传地址
      labelPosition: "left", //右对齐
      id: "",
      ctime: "",
      account: "",
      userGroup: "",
      imgUrl: "",
      newPwd: "", //新密码
    };
  },
  created() {
    this.UPLOAD_HEAD_IMG = UPLOAD_HEAD_IMG; //引封装的统一IP;
    this.uploadData = { id: localStorage.id };
    userImg(localStorage.id).then((res) => {
      for (let obj in res.data.accountInfo) {
        this[obj] = res.data.accountInfo[obj];
      }
      this.ctime = getTime(this.ctime);
    });
  },
  methods: {
    handleAvatarSuccess(res) {
      if (res.code == 0) {
        // 发出通知
        this.$bus.$emit("imgUploadFinish");
      }
    },

    // 修改密码
    ClickeditPwd() {
      editpwd(this.newPwd, localStorage.id).then((res) => {
        if (res.data.code == 0) {
          this.$notify({
            title: "提示",
            message: "密码修改成功,请重新登陆",
            duration: 0,
          });
          this.$router.push("/");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  width: 100%;
  .text {
    font-size: 14px;
  }
  .el-form {
    width: 34%;
  }
  .el-input {
    display: inline-block;
  }
  .el-button {
    display: inline-block;
  }
}
</style>